<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}" />
    <title>更新mips</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    <style>
        .popup-result .text {
            text-align: center;
            line-height: 1.7;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
<div class="app-page">
    <div class="app-page-header">
        <div class="page-title">
            <div class="title">更新mips</div>
        </div>
    </div>
    <div class="app-page-content">
        <div class="app-card z-mab">
            <div class="app-card-body">
                <!-- 过滤器 -->
                <form class="filter">
                    <input type="hidden" name="deviceUpgradeId" th:value="${deviceUpgradeId}">
                    <div class="filter-group">
                        <div class="filter-item">
                            <div class="form-item row">
                                <div class="label">mips版本号</div>
                                <div class="body">

                                    <select name="mipsVersion">
                                        <option value="">---请选择---</option>
                                        <option th:each="versionCode:${versionCodeList}"
                                                th:value="${versionCode}"
                                                th:text="${versionCode}"
                                                th:selected="${mipsVersion}">
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="filter-item">
                            <div class="form-item row">
                                <div class="label">在线状态</div>
                                <div class="body">
                                    <select name="deviceStatus">
                                        <option value="">---请选择---</option>
                                        <option th:each="dsm: ${deviceStatusMap}"
                                                th:value="${dsm.key}"
                                                th:text="${dsm.value}"
                                                th:selected="${deviceStatus}"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="filter-item">
                            <div class="form-item row">
                                <div class="label">机型</div>
                                <div class="body">
                                    <select name="model">
                                        <option value="">---请选择---</option>
                                        <option th:each="deviceMode: ${deviceModelList}"
                                                th:value="${deviceMode.deviceModel}"
                                                th:text="${deviceMode.deviceModel}"
                                                th:selected="${model}"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="filter-item">
                            <div class="form-item row">
                                <div class="label">分组</div>
                                <div class="body">
                                    <select name="groupCode">
                                        <option value="">---请选择---</option>
                                        <option th:each="deviceGroup:${deviceGroupList}"
                                                th:value="${deviceGroup.groupCode}"
                                                th:text="${deviceGroup.groupCode}"
                                                th:selected="${groupCode}">
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="filter-group">
                        <div class="filter-item">
                            <div class="form-item row">
                                <div class="label">选择省份</div>
                                <div class="body">
                                    <select name="province" class="select-province" data-rule="required" data-name="省份">
                                        <option value="">选择所在省份</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="filter-item">
                            <div class="form-item row">
                                <div class="label">选择城市</div>
                                <div class="body">
                                    <select name="city" class="select-city" data-rule="required" data-name="市区">
                                        <option value="">选择所在市区</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="filter-item">
                            <div class="form-item row">
                                <div class="label">选择区县</div>
                                <div class="body">
                                    <select name="area" class="select-district" data-rule="required" data-name="区县">
                                        <option value="">选择所在区县</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="filter-group">
                        <button class="z-btn z-primary">查询</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="app-card">
            <div class="app-card-body">
                <div class="app-list-total z-mab">
                    <span>总计：<i th:text="${total}"></i></span>
                    <span>在线：<i th:text="${onlineCount}"></i></span>
                    <span>离线：<i th:text="${offlineCount}"></i></span>
                </div>
                <div class="z-btn-group z-mab">
                    <a class="batch-upgrade z-btn z-primary">更新</a>
                </div>
                <table class="z-table">
                    <thead>
                    <th>
                        <input type="checkbox" class="input j-checkbox-all">
                    </th>
                    <th>设备名称</th>
                    <th>设备IP</th>
                    <th>设备mac</th>
                    <th>在线状态</th>
                    <th>省</th>
                    <th>市</th>
                    <th>区</th>
                    <th>所属分组</th>
                    <th>机型</th>
                    <th>固件版本</th>
                    </thead>
                    <tbody>
                    <tr th:each="apkDevice:${apkDeviceList}" th:attr="data-id=${apkDevice.deviceInfoId}">
                        <td>
                            <input type="checkbox" class="input j-checkbox">
                        </td>
                        <td th:text="${apkDevice.deviceNum}"></td>
                        <td th:text="${apkDevice.deviceIp}"></td>
                        <td th:text="${apkDevice.deviceMac}"></td>
                        <div th:switch="${apkDevice.deviceStatus}">
                            <td th:case="'1'" th:text="离线"></td>
                            <td th:case="'0'" th:text="在线"></td>
                        </div>
                        <td th:text="${apkDevice.deviceProvince}"></td>
                        <td th:text="${apkDevice.deviceCity}"></td>
                        <td th:text="${apkDevice.deviceCounty}"></td>
                        <td th:text="${apkDevice.groupCode}"></td>
                        <td th:text="${apkDevice.deviceModel}"></td>
                        <td th:text="${apkDevice.deviceSoftVer}"></td>
                    </tr>
                    </tbody>
                </table>
                <!-- 分页信息 -->
                <div class="app-card-body">
                    <!-- 前端分页 -->
                    <div class="pagination z-pat z-fr"></div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 更新结果 -->
<div class="popup-result popup-default z-popup z-fixed z-df z-flex-cc z-hide">
    <div class="bg" data-popup-close></div>
    <section class="result section z-hide">
        <div class="title">更新完成</div>
        <div class="content">
            <div class="text">
                <p>更新完成！成功<span class="fail-success">0</span>，失败<span class="fail-count">100</span>！</p>
            </div>
            <div class="z-btn-group">
                <a class="z-btn z-primary" data-popup-close>确定</a>
            </div>
        </div>
    </section>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:src="@{/js/address-0.0.3.js}"></script>
<script th:inline="javascript">
    //获取context path
    var context = $("meta[name='ctx']").attr("content") || '';

    var province =  [[${province}]];
    var city = [[${city}]];
    var area = [[${area}]];
    console.log("province : " + province + ",city : " + city + ",area : " +area);
    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);

    // 省市区
    $(".filter").address({
        provinceText: '---请选择---',
        cityText: '---请选择---',
        districtText: '---请选择---',
        apiUrl: 'http://xc-dmp.37226.com/api/area',

        // 默认值
        defaultProvince: province,
        defaultCity: city,
        defaultDistrict: area,
    });

    //处理分页

    var pageNum =  [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];
    var mipsVersion = $("[name='mipsVersion']").val();
    var deviceStatus = $("[name='deviceStatus']").val();
    var model = $("[name='model']").val();
    var province = $("[name='province']").val();
    var city = $("[name='city']").val();
    var area = $("[name='area']").val();
    var groupCode = $("[name='groupCode']").val();
    var pagination = new Pagination(".pagination", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function(pageIndex) {
            window.location.href = context + "/deviceUpgrade/apkDeviceList?pageNum=" + pageIndex + "&pageSize=" + pageSize
                + "&mipsVersion=" + mipsVersion + "&deviceStatus=" + deviceStatus + "&model=" + model + "&province=" + province
                + "&city=" + city + "&area=" + area + "&groupCode=" + groupCode;
        }
    });

    // 获取表格中选择的ID
    function getSelecteId() {
        let temp = [];
        $('tbody [type="checkbox"]').each(function (index, element) {
            if (element.checked == true) {
                temp.push($(this).parents('tr,.tr').data('id'));
            }
        })
        return temp.join(',');
    }

    // 更新
    $('.batch-upgrade').click(function (params) {
        var deviceUpgradeId = $("[name='deviceUpgradeId']").val();
        if (deviceUpgradeId == '') {
            popup.tipsTop("软件升级ID为空，请联系管理员", 'warning');
            return;
        }
        var id = getSelecteId();
        if (id != '') {
            if (confirm('确认是否更新')) {
                $.ajax({
                    type: "POST",
                    url: context + "/deviceUpgrade/updateMips",
                    data: {
                        deviceInfoIds: id,
                        deviceUpgradeId :deviceUpgradeId
                    },
                    success: function (obj) {
                        var code = obj.code;
                        if (code == 0) {
                            // 更新完成 - 全部成功
                            $('.popup-result .result .text ').html('<p>更新完成！成功<span class="fail-success">0</span>，失败<span class="fail-count">100</span>！</p>')
                            popup.open('.popup-result .result')
                        } else {
                            popup.tipsTop(obj.msg, 'warning');
                        }
                    }
                })
            }
        } else {
            popup.tipsTop("请选择需要删除的数据", 'warning');
        }
    });
</script>
</body>

</html>